<script setup lang="ts">
//这里编写ts代码
//1.简单，直接推导
import { computed, ref } from 'vue'
const count = ref(100)
const doubleCount = computed(() => count.value * 2)
//2.复杂些
//需求：给ref函数标注类型，接收后端返回的对象列表，然后使用计算属性做过滤计算，计算得到单价大于500的商品
// [
//   {id: '1001', name: '男鞋', price:888},
//   {id: '1002', name: '女鞋', price:555},
//   {id: '1003', name: '衬衫', price:400},
// ]
//第一步：为ref标注类型
type Item = {
  id: string,
  name: string,
  price: number
}
const list = ref<Item[]>([
   {id: '1001', name: '男鞋', price:888},
   {id: '1002', name: '女鞋', price:555},
   {id: '1003', name: '衬衫', price:400},
])
//第二步：基于list筛选出大于500的商品
const filterCount = computed(() => list.value.filter(item => item.price > 500))
</script>

<template>
  <div>
    开始写vue和ts
    <ul>
      <li v-for="item in filterCount" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<style scoped>

</style>
